<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 
			background-clip，看看CSS3定义的这个属性的用法：

规定背景的绘制区域:

background-clip: border-box(默认值，背景被裁剪到边框盒)|padding-box(背景被裁剪到内边距框)|content-box(背景被裁剪到内容框);
			 */
			.menu-icon {
				width: 30px;
				height: 5px;
				border-top: 5px solid #DD575C;
				border-bottom: 5px solid #DD575C;
				background-color: #DD575C;
				padding: 5px 0;
				background-clip:content-box;
			}
		</style>
	</head>
	<body>
		<span style="font-family:Comic Sans MS;font-size:14px;">
			<div class="menu-icon"></div>
		</span>

	</body>
</html>
